<template>
  <div class="root_view_css">
    <qt-button
      class="text-button-class"
      text="全屏播放"
      :style="{ backgroundColor: '#ccc', height: '100px', marginBottom: '20px' }"
      focusable
      focusBorder
      @click="onClick(1)"
    >
    </qt-button>

    <qt-button
      class="text-button-class"
      text="小窗播放"
      :style="{ backgroundColor: '#ccc', height: '100px', marginBottom: '20px' }"
      focusable
      focusBorder
      @click="onClick(2)"
    >
    </qt-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core'
import { ref } from 'vue'
import {
  ESKeyCode,
  ESKeyEvent,
  ESLogLevel,
  useESEventBus,
  useESLog,
  useESToast
} from '@extscreen/es3-core'
import { useESRouter, useESNativeRouter } from '@extscreen/es3-router'

export default defineComponent({
  name: 'template',
  components: {},
  setup() {
    const router = useESRouter()
    const nativeRouter = useESNativeRouter()

    const toast = useESToast()

    // 生命周期 页面创建
    const onESCreate = (params) => {}

    function onClick(type) {

      toast.showToast(type)

      switch (type) {
        case 1:
          router.push({
            name: 'fullPlay'
          })
          break
        case 2:
          router.push({
            name: 'smallPlay'
          })
          break
      }
    }

    function onBackPressed() {
      nativeRouter.back()
    }

    return {
      onBackPressed,
      onESCreate,
      onClick
    }
  }
})
</script>

<style scoped>
.root_view_css {
  width: 1920px;
  height: 1080px;
  background-color: transparent;
}
</style>
